<div class="container-xl">
  <!-- Page title -->
  <div class="page-header d-print-none">
    <div class="row align-items-center">
      <div class="col">
        <h2 class="page-title">
          正在下载
        </h2>
      </div>
    </div>
  </div>
</div>
{% if DownloadCount > 0 %}
  <div class="page-body">
    <div class="container-xl">
      <div class="row row-cards">
        {% for Torrent in Torrents %}
          <div class="col-lg-4">
            <div class="card">
              <div class="card-body">
                <div class="row align-items-center">
                  {% if Torrent.image %}
                    <div class="col-3">
                      <img src="{{ Torrent.image }}" class="rounded">
                    </div>
                  {% endif %}
                  <div class="col">
                    <h3 class="card-title mb-1">
                      <a class="text-reset">{{ Torrent.title }}</a>
                    </h3>
                    <div class="text-muted" id="speed_text_{{ Torrent.id }}">
                      {{ Torrent.speed }}
                    </div>
                    <div class="mt-3">
                      <div class="row g-2 align-items-center">
                        <div class="col-auto" id="progress_text_{{ Torrent.id }}">
                          {{ Torrent.progress }}%
                        </div>
                        <div class="col">
                          <div class="progress progress-sm">
                            <div class="progress-bar" id="progress_{{ Torrent.id }}"
                                 style="width: {{ Torrent.progress }}%"
                                 role="progressbar" aria-valuenow="{{ Torrent.progress }}" aria-valuemin="0"
                                 aria-valuemax="100">
                              <span class="visually-hidden"></span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-auto">
                    <div class="dropdown">
                      <a href="#" class="btn-action" data-bs-toggle="dropdown" aria-expanded="false">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24"
                             stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
                             stroke-linejoin="round">
                          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                          <circle cx="12" cy="12" r="1"/>
                          <circle cx="12" cy="19" r="1"/>
                          <circle cx="12" cy="5" r="1"/>
                        </svg>
                      </a>
                      <div class="dropdown-menu dropdown-menu-end">
                        {% if Client != 'client115' %}
                          <a href="javascript:start_pt_download('{{ Torrent.id }}')" id="start_btn_{{ Torrent.id }}"
                             class="dropdown-item"
                             style="{% if Torrent.state == 'Downloading' %}display:none{% endif %}">开始</a>
                          <a href="javascript:stop_pt_download('{{ Torrent.id }}')" id="stop_btn_{{ Torrent.id }}"
                             class="dropdown-item"
                             style="{% if Torrent.state == 'Stoped' %}display:none{% endif %}">暂停</a>
                        {% endif %}
                        <a href="javascript:remove_pt_download('{{ Torrent.id }}')"
                           class="dropdown-item text-danger">删除</a>
                      </div>
                    </div>
                  </div>
                  <input type="hidden" class="download_ids" id="id_{{ Torrent.id }}" value="{{ Torrent.id }}">
                </div>
              </div>
            </div>
          </div>
        {% endfor %}
      </div>
    </div>
  </div>
{% else %}
  <div class="page-body">
    <div class="container-xl d-flex flex-column justify-content-center">
      <div class="empty">
        <div class="empty-img"><img src="./static/img/quitting_time.svg" height="128" alt="">
        </div>
        <p class="empty-title">没有记录</p>
        <p class="empty-subtitle text-muted">
          当前没有正在下载的项目
        </p>
      </div>
    </div>
  </div>
{% endif %}
<script type="text/javascript">
  // 下载控制
  function start_pt_download(id) {
    const cmd = "pt_start";
    const param = {"id": id};
    ajax_post(cmd, param, function (ret) {
      get_torrent_info(ret.id)
    });
  }

  function stop_pt_download(id) {
    const cmd = "pt_stop";
    const param = {"id": id};
    ajax_post(cmd, param, function (ret) {
      get_torrent_info(ret.id)
    });
  }

  function remove_pt_download(id) {
    const cmd = "pt_remove";
    const param = {"id": id};
    ajax_post(cmd, param, function (ret) {
      navmenu('downloading');
    });
  }

  //更新所有种子页面信息
  function get_all_torrents_info() {
    const cmd = "pt_info";
    let ids = [];
    let i = 0;
    $(".download_ids").each(function () {
      ids[i] = $(this).val();
      i++;
    });
    if (ids.length == 0) {
      return;
    }
    let param = {"ids": ids};
    ajax_post(cmd, param, function (ret) {
      if (ret.retcode == "0") {
        for (var i = 0; i < ret.torrents.length; i++) {
          update_torrent_ui(ret.torrents[i]);
        }
        setTimeout("get_all_torrents_info()", 2000);
      }
    });
  }

  //更新一个种子页面信息
  function get_torrent_info(id) {
    const cmd = "pt_info";
    const param = {"ids": id};
    ajax_post(cmd, param, function (ret) {
      if (ret.retcode == "0") {
        for (var i = 0; i < ret.torrents.length; i++) {
          update_torrent_ui(ret.torrents[i]);
        }
      }
    });
  }


  //更新单个种子的页面信息
  function update_torrent_ui(info) {
    $("#speed_text_" + info.id).text(info.speed);
    $("#progress_text_" + info.id).text(info.progress + "%");
    $("#progress_" + info.id).attr("style", "width: " + info.progress + "%")
        .attr("aria-valuenow", info.progress);
    if (info.state == "Stoped") {
      $("#start_btn_" + info.id).show()
      $("#stop_btn_" + info.id).hide()
    } else {
      $("#start_btn_" + info.id).hide()
      $("#stop_btn_" + info.id).show()
    }
  }

  //事件
  setTimeout("get_all_torrents_info()", 2000);

</script>